<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>实时聊天室演示页面</title>
    <script type="text/javascript" src="./js/adapter.min.js" ></script>
    <script type="text/javascript" src="./js/jquery.min.js" ></script>
    <script type="text/javascript" src="./js/jquery.blockUI.min.js" ></script>
    <script type="text/javascript" src="./js/spin.min.js"></script>
    <script type="text/javascript" src="./js/md5.js"></script>
    <script type="text/javascript" src="./js/janus.js" ></script>
    <script type="text/javascript" src="./js/sdk.js"></script>
    <script>
        $(function() {
            $(".navbar-static-top").load("navbar.html", function() {
                $(".navbar-static-top li.dropdown").addClass("active");
                $(".navbar-static-top a[href='videoroom.html']").parent().addClass("active");
            });
        });
    </script>

    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/demo.css" type="text/css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/toastr.min.css"/>
</head>
<body>

<div class="wrapper">
    <h2>控制台</h2>
    <div class="ctrl">
        <h3>常规设置</h3>
        <ul class="clear">
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;项目id：<input type="text" class="ipt"  id="projectId" value="12004"/></li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;角色：<select id="userType"><option  value="1">主持人</option><option selected  value="0">参与人</option></select></li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的id：<input type="text" class="ipt" id="userId" value="1000"/></li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对象id：<input type="text" class="ipt" id="objId" value="500"/></li>
        </ul>
    </div>
    <div class="ctrl clear">
        <div class="action">
            <h3>演示操作</h3>
            <ul>
                <li>
                    <div class="initserver">
                        <input class="btn" id="btn-initserver" type="button"  value="开启/加入房间服务"/>
                        <input class="btn" id="btn-togglemute" type="button"  value="静音"/>
                        <input class="btn" id="btn-toggleVideoMute" type="button"  value="禁止视频"/>
                        <input class="btn" id="btn-screenShare" type="button"  value="共享桌面"/>
                        <input class="btn" id="btn-stopUserPush" type="button"  value="停止用户推流"/>
                        <input class="btn off" id="btn-uninitserver" type="button"  value="停止房间服务"/>
                    </div>
                </li>
            </ul>
        </div>
    </div>


    <div class="container">
        <h3>输出</h3>
        <div class="row">
            <div class="col-md-12">
                <div class="container" id="videos">
                    <table>
                        <tr>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">本地视频 <span class="label label-primary " id="publisher"></span>
                                            </h3>
                                        </div>
                                        <div class="panel-body" id="videolocal">
                                            <video class="rounded centered" id="myvideoLocal" autoplay="true" playsinline="" muted="muted" width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">桌面分享 <span class="label label-primary " id="screenSharePublisher"></span>
                                            </h3>
                                        </div>
                                        <div class="panel-body" id="screenShare">
                                            <video class="rounded centered" id="myScreenShare" autoplay="true" playsinline="" muted="muted" width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">远程视频 #1 <span class="label label-info " id="remote1"></span></h3>
                                        </div>
                                        <div class="panel-body relative" id="videoremote1">
                                            <video class="rounded centered relative" id="remoteVideo1" autoplay="" playsinline="" width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">远程视频 #2 <span class="label label-info " id="remote2"></span></h3>
                                        </div>
                                        <div class="panel-body relative" id="videoremote2">
                                            <video class="rounded centered relative" id="remoteVideo2" autoplay="" playsinline=""  width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">远程视频 #3 <span class="label label-info " id="remote3"></span></h3>
                                        </div>
                                        <div class="panel-body relative" id="videoremote3">
                                            <video class="rounded centered relative" id="remoteVideo3" autoplay="" playsinline=""  width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">远程视频 #4 <span class="label label-info " id="remote4"></span></h3>
                                        </div>
                                        <div class="panel-body relative" id="videoremote4">
                                            <video class="rounded centered relative" id="remoteVideo4" autoplay="" playsinline="" width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="col-md-4">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">远程视频 #5 <span class="label label-info " id="remote5"></span></h3>
                                        </div>
                                        <div class="panel-body relative" id="videoremote5">
                                            <video class="rounded centered relative" id="remoteVideo5" autoplay="" playsinline=""  width="100%" height="100%"></video>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>
<div class="footer">
</div>
</div>
<script>
    window.stream = []
    var sdkServer ;
    var videos = [];


    $("#btn-initserver").click(function(){
        var appid = "",sdkobj = "", options;
        var projectId = $("#projectId").val(), userId = $("#userId").val(), usrType=$("#userType").val(), videoType =3;
        sdkServer = sdk.init(appid, sdkobj,suc, err);
        if(sdkServer !== undefined){
            sdkServer.createRoom(projectId, suc, err);
            sdkServer.setStatusCallback(addListenerToSDK, suc, err);
            options = {
                userId: userId,
                userToken: "",
                videoType: 3,
                userType: usrType,
                projectId: projectId,
                roomId: "",
                roomName: ""};
            sdkServer.startPushStreamV2(options, function(res){
                console.log(191, res);
                if(res){
                    console.log("get mgr param");
                }
                else
                {
                    console.error("failed to get param from mgr");
                }
            });
        }
        else
        {
            console.error("sdk has not been inited yet!");
        }

    });

    //toggle mute, now only for self,
    $("#btn-togglemute").click(function(){
        var buttonTxt = $("#btn-togglemute").val();
        if(buttonTxt === "静音")
        {
            console.log("try to mute userId: " + $("#objId").val());
            if($("#objId").val() !== $("#userId").val() && $("#userType").val() !== "1")
            {
                console.error("mute others is only for holders!");
                return;
            }

            ///mute audio
            sdkServer.mute($("#objId").val(), 1, suc, err);
            $("#btn-togglemute").val("取消静音");
        }
        else if(buttonTxt === "取消静音")
        {
            console.log("try to unmute userId: " + $("#objId").val());
            if($("#objId").val() !== $("#userId").val() && $("#userType").val() !== "1")
            {
                console.error("unmute others is only for holders!");
                return;
            }

            ///unmute audio
            sdkServer.mute($("#objId").val(), 0, suc, err);
            $("#btn-togglemute").val("静音");
        }
        else{
            console.log("unsupported status, please refresh page.");
        }

    });
    //toggle video mute, now only for self,
    $("#btn-toggleVideoMute").click(function(){
        var buttonTxt = $("#btn-toggleVideoMute").val();
        if(buttonTxt === "禁止视频")
        {
            console.log("try to mute video userId: " + $("#objId").val());
            if($("#objId").val() !== $("#userId").val() && $("#userType").val() !== "1")
            {
                console.error("mute video others is only for holders!");
                return;
            }

            ///mute video
            sdkServer.videoMute($("#objId").val(), 1, suc, err);
            $("#btn-toggleVideoMute").val("取消禁止视频");
        }
        else if(buttonTxt === "取消禁止视频")
        {
            console.log("try to unmute video userId: " + $("#objId").val());
            if($("#objId").val() !== $("#userId").val() && $("#userType").val() !== "1")
            {
                console.error("unmute video others is only for holders!");
                return;
            }

            ///unmute video
            sdkServer.videoMute($("#objId").val(), 0, suc, err);
            $("#btn-toggleVideoMute").val("禁止视频");
        }
        else{
            console.log("unsupported mute video status, please refresh page.");
        }
    });

    //toggle video mute, now only for self,
    $("#btn-screenShare").click(function(){
        var buttonTxt = $("#btn-screenShare").val();
        if(buttonTxt === "共享桌面")
        {
            console.log("try to share desktop");
            if($("#userType").val() !== "1")
            {
                console.error("sharing desktop is only for holders!");
                return;
            }

            ///screen share
            sdkServer.screenShare($("#objId").val(), 1, suc, err);
            $("#btn-screenShare").val("停止共享桌面");
        }
        else if(buttonTxt === "停止共享桌面")
        {
            console.log("try to stop sharing desktop");
            if($("#userType").val() !== "1")
            {
                console.error("sharing desktop is only for holders!");
                return;
            }

            ///stop screenShare
            sdkServer.screenShare($("#objId").val(), 0, suc, err);
            $("#btn-screenShare").val("共享桌面");
        }
        else{
            console.log("unsupported desktop sharing status, please refresh page.");
        }
    });
    //, now stop push is only for self,
    $("#btn-stopUserPush").click(function(){
        console.log("try to toggle mute userId: " + $("#objId").val());
        if($("#objId").val() === $("#userId").val())
        {
            var ipt_projectId = $("#projectId").val();
            var ipt_userId = $("#userId").val();
            var option = {
                userId : ipt_userId,
                videoType : 3,
                projectId : ipt_projectId,
                timeStamp : new Date().getTime()
            };
            if(sdkServer !== undefined){
                sdkServer.stopPushStream(option,function(res){
                    //您已停止推流
                    console.log("stop user pushing successfully");

                },err);
            }else{
                console.log("sdk has not been inited, just init at first");
            }
        }
        else
        {
            if($("#userType").val() !== "1")
            {
                console.error("stopping others is only for holders!");
                return;
            }
            ///not supported yet.
            console.error("stopping others is not supported yet. please contact admin for further info.");
        }

    });
    //destroy room, only for holder
    $("#btn-uninitserver").click(function(){
        console.log("try to destroy room");
        var userType = $("#userType").val();
        if(userType !== "1")
        {
            console.error("destroy room is only for holders!");
            return;
        }
        sdkServer.destroyRoom($("#userId").val(),$("#projectId").val());

    });
    var addListenerToSDK = function(eventType, detail){
        console.log(356, "one sdk msg: " + eventType);
        myGetAudio()
        if(eventType === SZW_user_enter)
        {
            //param is the user id
            if(detail === $("#userId").val())
                return $('#myvideoLocal');
            else
            {
                if(detail.indexOf("_screenShare_") != -1)
                {
                    return $('#myScreenShare');
                }
                ///remote comer,use 1 at first. 应该有一个video 对象占用排序的方法。
                else if(!videos[0])
                {
                    videos[0] = detail;
                    return $('#remoteVideo1');
                }
                else if(!videos[1])
                {
                    videos[1] = detail;
                    return $('#remoteVideo2');
                }
                else if(!videos[2])
                {
                    videos[2] = detail;
                    return $('#remoteVideo3');
                }
                else if(!videos[3])
                {
                    videos[3] = detail;
                    return $('#remoteVideo4');
                }
                else if(!videos[4])
                {
                    videos[4] = detail;
                    return $('#remoteVideo5');
                }
                console.error("no more video for new comers!!!!!!!");
                return null;

            }
        }
        else if(eventType === SZW_user_leave)
        {
            ///some one gone, release.
            if(videos[0] === detail)
            {
                videos[0] = null;
            }
            else if(videos[1]  === detail)
            {
                videos[1] = null;
            }
            else if(videos[2] === detail)
            {
                videos[2] = null;
            }
            else if(videos[3]  === detail)
            {
                videos[3] = null;

            }
            else if(videos[4] === detail)
            {
                videos[4] = null;
            }
            console.error("no more video for new comers!!!!!!!");
        }
    }

    var suc  = function(res){
        console.log("running suc result: " + res);
    }
    var err  = function(res){
        console.log("running err result: " + res);
    }



    function myGetAudio() {
        navigator.mediaDevices.getUserMedia({ audio: true }).then(
            stream => {
                console.log(stream);
                stream.name = 'myGetAudio'
                window.stream.push(stream)
                console.log("授权成功！");
            }
        );
        // window.stream.forEach(i => {
        //     if (i.active) {
        //
        //     }
        // })

    }
</script>


</body>
</html>
